<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			/*全选/全不选*/
				var checkedAllBox=document.getElementById("checkedAllBox");
				
				var items=document.getElementsByName("items");
			/*全选*/
				var checkedAllBtn=document.getElementById("checkedAllBtn");
				
				checkedAllBtn.onclick=function(){
					checkedAllBox.checked=true;
					for(var i=0;i<items.length;i++){
						items[i].checked=true;
					}
				};
			/*全不选*/
				var checkedNoBtn=document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick=function(){
					checkedAllBox.checked=false;
					for(var i=0;i<items.length;i++){
						items[i].checked=false;
					}
				};
			/*反选*/
				var checkedRevBtn=document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick=function(){
					checkedAllBox.checked=true;
					for(var i=0;i<items.length;i++){
						
						items[i].checked=!items[i].checked; 
						if(!items[i].checked){
								checkedAllBox.checked=false;
						}
					}				
				};
			/*提交*/
				var sendBtn=document.getElementById("sendBtn");
				sendBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						if(items[i].checked){
							alert(items[i].value);
						}
						
					}				
				};
			/*全选/全不选*/				
				checkedAllBox.onclick=function(){
					for(var i=0;i<items.length;i++){						
							items[i].checked=this.checked;
						
					}				
				};
			/*点击按钮时判断，如果全选了就修改“全选”的值*/
				for(var i=0;i<items.length;i++){
					items[i].onclick=function(){
						checkedAllBox.checked=true;
						for(var j=0;j<items.length;j++){							
							if(!items[j].checked){
								checkedAllBox.checked=false;
								break;
						}
					}
						
					}
				};
			}
		</script>
			
	</head>
	<body>
		<form action="" method="post">
			你的爱好是什么？<input type="checkbox" id="checkedAllBox" /> 全选/全不选
			<br />
			<input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="羽毛球"/>羽毛球
			<input type="checkbox" name="items" value="乒乓球"/>乒乓球
			
			<input type="button" id="checkedAllBtn" value="全选"/>
			<input type="button" id="checkedNoBtn" value="全不选"/>
			<input type="button" id="checkedRevBtn" value="反选"/>
			<input type="button" id="sendBtn" value="提交"/>
		</form>
	</body>
</html>
